<template>
	<view>
		<view class="play_valua_top">
			<view class="play_valua_top_first">
				<image src="https://aliyunoss.hntgov.net/image/2023/04/03/434bc1d204e14ed29ad56f88a89c2d22.jpg"></image>
				<view>
					<text class="pv_title">长沙颜家酱板鸭始于1994年的湖南地方...</text>
					<view style="color: #AFA9A9;margin-top: 20rpx;font-size: 26rpx;">一只装</view>
				</view>
			</view>

			<view class="play_valua_top_rate">
				综合评价 <u-rate min-count='1' gutter='20' :count="count" v-model="obj.starLevel"
					style="margin-left: 26rpx;" active-color='#F3AF4A'></u-rate>
				<text>{{obj.starLevel==5?'非常好':obj.starLevel==4?'好':obj.starLevel==3?'一般':obj.starLevel==2?'差':obj.starLevel==1?'非常差':''}}</text>
			</view>
			<u-input style="margin-top: 44rpx;" maxlength='200' v-model="obj.content" :type="type" :border="border"
				@input='input' :height="height" :auto-height="autoHeight" placeholder="您的评价可以帮助更多的人哦~" />
			<text v-if="show" style="color:#f00;">请输入评价内容</text>
			<u-upload ref="uUpload" :action="action" :auto-upload="false" max-count="3" @on-uploaded='onUploaded'
				:size-type='sizeType'></u-upload>

		</view>
		<view class="pv_botton">

			<view class="pv_botton_button" @tap='playEvaluate'>发表</view>
		</view>
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				obj: {},
				show: false,
				count: 5,
				value: 5,
				value1: 5,
				value2: 5,
				content: '',
				imageList: [],
				type: 'textarea',
				border: false,
				height: 150,
				autoHeight: true,
				productInfo: {},
				sizeType: ['compressed'],
				action: 'https://offline.hntgov.net/file/Oss/PutObjectApi',
				obj: {
					"orderId": 0,
					"productId": 0,
					"memberId": 0,
					"starLevel": 5,
					"content": "",
					"imgList": [{
						"sort": 0,
						"img_url": "string"
					}]
				}
			}
		},
		onLoad(e) {
			that = this
			that.obj.orderId = e.orderId
			that.productInfo = JSON.parse(e.productInfo)
			that.obj.productId = that.productInfo.product_id
			// that.obj.productId = 10091
			that.obj.memberId = uni.getStorageSync('memberId')
		},
		methods: {
			input(e) {
				if (!e) {
					this.show = true
				} else {
					this.show = false
				}
			},
			playEvaluate() {
				uni.reLaunch({
					url: 'pvsuccess'
				})
				// if (!that.obj.content) {
				// 	this.show = true
				// 	return
				// }
				// uni.showLoading({
				// 	mask: true,
				// })
				// this.$refs.uUpload.upload()

			},
			onUploaded(e) {
				
				// this.obj.imgList = e.map((item, index) => {
				// 	return {
				// 		'img_url': item.response.fileUrl,
				// 		'sort': index + 1
				// 	}
				// })
				// that.$request('/api/order/addOrderComment',that.obj,
				// 	'POST',{},5).then(
				// 	res => {
				// 	uni.hideLoading()
				// 		if (res.code == 0) {

				// 		}else{
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:'评论失败，请稍后重试！'
				// 		})
				// 	}
				// 					})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style scoped lang="scss">
	.play_valua_top {
		padding: 34rpx 30rpx 30rpx 30rpx;
		width: 750rpx;
		background-color: #FFFFFF;

		.play_valua_top_first {
			display: flex;
			align-items: center;
		}

		.play_valua_top_first image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.pv_title {
			color: #757575;
			font-size: 28rpx;
			width: 540rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 1;
		}
	}

	.play_valua_top_rate {
		display: flex;
		width: 690rpx;
		color: #3D3D3D;
		font-size: 26rpx;
		margin-top: 24rpx;
		margin-bottom: 40rpx;
		position: relative;
	}

	.play_valua_top_rate text {
		position: absolute;
		right: 0rpx;
		color: #AFA9A9;
		font-size: 26rpx;
	}

	.pv_botton {
		width: 750rpx;
		height: 164rpx;
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: center;
		bottom: 0rpx;
		background-color: #ffffff;

		.pv_botton_button {
			width: 690rpx;
			height: 100rpx;
			border-radius: 50rpx;
			color: #fff;
			background-color: #488CFE;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}
</style>